<template>
    <div class="order-report-1">
        <div class="report-table-top-title">商家授权汇总统计</div>
        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 128px">创建商家起止时间:</div>
                <div class="report-table-form1-item" style="width: 200px">
                    <el-date-picker
                        size="small"
                        v-model="timeStart"
                        type="date"
                        value-format="yyyy-MM-dd 00:00:00"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <div class="report-table-form1-item word samll" style="width: 20px">至</div>
                <div class="report-table-form1-item" style="width: 200px">
                    <el-date-picker
                        size="small"
                        v-model="timeEnd"
                        type="date"
                        value-format="yyyy-MM-dd 23:59:59"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <div class="report-table-form1-item word samll" style="width: 40px"></div>
                <el-button type="primary" size="small" @click="search">查询</el-button>
                <el-button type="primary" size="small" @click="exportRport">导出</el-button>
            </div>
        </div>
        <div class="page-padding-gray-small"></div>
        <div class="report-table-wrapper">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                :data="showList"
                border
                style="width: 100%"
                max-height="500"
                @row-click="rowClick"
            >
                <!-- <el-table-column prop="agentId" label="代理商ID" min-width="100"></el-table-column> -->
                <el-table-column prop="agentName" label="代理商名称" min-width="100" fixed></el-table-column>
                <!-- <el-table-column prop="oneToFiveItems" label="软件库存套数" min-width="100"></el-table-column>
                <el-table-column prop="oneToFiveSumPoints" label="已使用软件套数" min-width="110"></el-table-column> -->
                <el-table-column prop="yjTotalItem" label="总项目数" min-width="100"></el-table-column>
                <el-table-column prop="yjTerminalUseNum" label="使用设备数" min-width="100"></el-table-column>
                <el-table-column prop="cardLevelBItems" label="购买卡台B段数" min-width="110"></el-table-column>
                <el-table-column
                    prop="cardLevelCItems"
                    label="购买卡台C段数"
                    min-width="110"
                ></el-table-column>
                <el-table-column prop="memoryLenth100Items" label="购买数据可查100天" min-width="100"></el-table-column>
                <el-table-column
                    prop="memoryLenth200Items"
                    label="购买数据可查200天"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="memoryLenth400Items"
                    label="购买数据可查400天"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="memoryLenth600Items"
                    label="购买数据可查600天"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="memoryLenth800Items"
                    label="购买数据可查800天"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="screenItems"
                    label="购买霸屏服务数"
                    min-width="100"
                ></el-table-column>
            </el-table>
        </div>

        <el-dialog title="商家授权汇总明细统计" :visible.sync="dialogVisible" width="1140px">
            <div style="width: 1100px">
                <report-detail
                    :agentId="agentId"
                    :beginCreatetime="timeStart"
                    :endCreatetime="timeEnd"
                    :dialogVisible="dialogVisible"
                ></report-detail>
            </div>
        </el-dialog>

        <!-- <div class="report-table-block">
            <div class="report-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="position"
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="prev, pager, next, total"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>-->

        <div class="page-padding"></div>
    </div>
</template>

<script type="text/ecmascript-6">
import reportDetail from './page_7_4_report_point_sub'
import fileDownload from 'js-file-download'
import axios from 'axios'
export default {
    data: function () {
        return {
            timeStart: '',
            timeEnd: '',

            options1: [
                {
                    userName: '全部',
                    id: ''
                }
            ],
            value1: '',

            showList: [],
            totalNum: 0,
            position: 1, // 页码

            searchNo: '',
            searchName: '',
            dialogVisible: false,
            agentId: ''
        }
    },
    mounted () {
    },
    created () {
        this.setDefaultTime()
        this.getPage()
    },
    watch: {
        position () {
            this.getPage()
        }
    },
    components: {
        reportDetail
    },
    props: {
        underLine: null
    },
    computed: {
    },
    methods: {
        exportRport () {
            let that = this
            axios
                .post(
                    this.$store.state.IP +
                    '/CompanyRoomTotal/exportCompanyRoomPointTotal',
                    {
                        beginCreatetime: this.timeStart,
                        endCreatetime: this.timeEnd
                        // data: {
                        // }
                    },
                    {
                        responseType: 'blob',
                        headers: that.axiosDownloadHeaders()
                    }
                )
                .then(function (response) {
                    console.log(response)
                    if (
                        response.headers['content-type'] ===
                        'application/json;charset=UTF-8'
                    ) {
                        console.log('出错')
                        return
                    }
                    let fileName = decodeURIComponent(
                        response.headers['content-disposition']
                    )
                    fileName = fileName.substring(20)
                    if (
                        response.headers['content-type'] ===
                        'application/x-msdownload;charset=UTF-8'
                    ) {
                        fileDownload(response.data, fileName)
                    }
                })
                .catch(function (error) {
                    alert(error)
                })
        },
        rowClick (row, event, column) {
            console.log(row)
            console.log(row.agentId)
            this.agentId = row.agentId
            this.dialogVisible = true
        },
        toTimeS1 (date) {
            return date.getFullYear() + '-' + (this.outTen(date.getMonth() + 1)).toString() + '-' + (this.outTen(date.getDate())).toString() + ' 00:00:00'
        },
        toTimeS2 (date) {
            return date.getFullYear() + '-' + (this.outTen(date.getMonth() + 1)).toString() + '-' + (this.outTen(date.getDate())).toString() + ' 23:59:59'
        },

        outTen (item) {
            if (item < 10) {
                return '0' + item
            } else {
                return item
            }
        },

        getAllAgent () {
            this.$http.post(this.$store.state.IP + '/system/company/getAllAgent', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    console.log(response.data)
                    response.data.forEach(item => {
                        this.options1.push(item)
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        setDefaultTime () {
            let time = new Date()
            time.setDate(time.getDate() - 1)
            this.timeStart = this.toTimeS1(time)
            let time2 = new Date()
            time2.setDate(time.getDate() + 1)
            this.timeEnd = this.toTimeS2(time2)
        },

        search () {
            this.position = 1
            if (this.timeStart > this.timeEnd) {
                this.$message({
                    message: '开始时间不能大于结束时间',
                    type: 'warning'
                })
                return
            }
            this.getPage()
        },

        getPage () {
            this.$http.post(this.$store.state.IP + '/CompanyRoomTotal/CompanyRoomPointTotal', {
                beginCreatetime: this.timeStart,
                endCreatetime: this.timeEnd
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用point报表成功')
                    console.log(response.res)
                    this.showList = response.res
                    // this.totalNum = response.data.total
                }
                if (response.ret !== '0') {
                    console.log('调用point报表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        // 换页方法
        handleCurrentChange (val) {
            this.position = val
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.order-report-1
    width: 100%
    background: #fff
    min-height: calc(100vh - 65px - 95px)

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff
</style>
